<!-- 热映和待映公共代码的地方
    1. 骨架屏
    2. 请求
 -->
<template>
	<div class="mv-body">
		<section class="skeleton" v-if="isLoading">
			<van-skeleton v-for="v in 10" :key="v" title :row="3" />
		</section>

		<van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<slot :list="list"></slot>
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from 'vue';
import { Skeleton, List, PullRefresh } from 'vant';
import axios from '@/api/instance';
Vue.use(Skeleton);
Vue.use(List);
Vue.use(PullRefresh);
export default {
	//import引入的组件需要注入到对象中才能使用
	components: {},
	// 通过 props 接受父组件传入的值
	props: ['type'],
	data() {
		//这里存放数据
		return {
			isLoading: true, // 表示数据正在加载中
			list: [], //列表的数据
			loading: false,
			finished: false,
			refreshing: false,
		};
	},
	//监听属性 类似于data概念
	computed: {
		cityName: function () {
			return localStorage.getItem('cityName') || '广州';
		},
		cityId: function () {
			return localStorage.getItem('cityId') || 20;
		},
	},
	//监控data中的数据变化
	watch: {},
	//方法集合
	methods: {
		// 列表下拉刷新的时候
		onRefresh: function () {
			// 清空列表数据
			this.finished = false;
			// 重新加载数据
			// 将loading 设置为true, 表示处理加载状态
			this.loading = true;
			this.onLoad(); //
		},
		// 列表触底加载下一条数据的时候
		onLoad: async function () {
			console.log('加载下一页的数据');
			// 如果现在是下拉刷新， refreshing 为真
			if (this.refreshing) {
				this.list = []; // 清空原来列表
				this.offset = 0; // 从第0条开始从新加载数据
				this.refreshing = false;
			} else {
				// 触底 加载下一页 添加偏移量
				this.offset += this.limit;
			}
			await this.loadData(); // 重新加载数据
			this.loading = false; // 设置加载的状态位为false
		},
		/* 用来加载列表需要的数据 */
		async loadData() {
			console.log('加载列表的数据');
			// 请求逻辑还未编写
			// 获取当前请求的url
			let url =
				this.type === 'hot'
					? '/mmdb/movie/v2/list/hot.json'
					: '/mmdb/movie/v1/list/wish/order/coming.json';
			// console.log(url);
			// 获取请求参数
			let { limit, offset, cityName, cityId } = this;
			// console.log(limit, offset, cityName, cityId);
			// 获取数据
			let result = await axios.get(url, {
				params: {
					// limit:limit
					limit,
					offset,
					ct: cityName,
					ci: cityId,
				},
			});
			// 判断是否还有下一页数据
			let hasMore = result?.data?.paging?.hasMore; // false
			this.finished = !hasMore; // 有更多和完成，两者之间是一个互斥关系
			// console.log('result:', result);
			// 根据 type 不同，获取列表的数据
			let source = this.type === 'hot' ? result.data.hot : result.data.coming;
			// console.log('获取到的列表数据,', list);
			// 追加 列表的逻辑
			this.list = [...this.list, ...source];
		},
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	async created() {
		console.log(this.type);
		// 设置请求参数
		this.limit = 10;
		this.offset = 0;
		await this.loadData();
		// 数据已经加载回来，把骨架屏状态位设置成 false
		this.isLoading = false;
	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {},
	beforeCreate() {}, //生命周期 - 创建之前
	beforeMount() {}, //生命周期 - 挂载之前
	beforeUpdate() {}, //生命周期 - 更新之前
	updated() {}, //生命周期 - 更新之后
	beforeDestroy() {}, //生命周期 - 销毁之前
	destroyed() {}, //生命周期 - 销毁完成
	activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.mv-body {
	margin-top: 0.1rem;
}
</style>
